<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
    </head>

    <body>
        <div id="app" v-cloak>
            <div class="title">HeapChecher</div>
            <div class="properties">
                <div class="property">
                    <div class="label">
                        <span class="text">选择snapshot文件</span>
                    </div>
                    <div class="content">
                        <input placeholder="选择文件" v-model="targetFile"
                            id="targetFile"
                            value="{{ targetFile }}" @focus="onInputFoucs">
                    </div>
                </div>
                <div class="property">
                    <ui-progress class="flex-1 label" style="width: 80%;"
                        id="progress" :value="progress">
                    </ui-progress>
                </div>
                <button class=" apply-btn" @click="onCheckClick">查找</button>
                <div class="property">
                    <div class="label">
                        <span class="text">输入搜索关键字</span>
                    </div>
                    <div class="content">
                        <ui-input placeholder="search" id="filter"
                            @change="inputChange"></ui-input>
                    </div>
                </div>
                <div class="property">
                    <ul>
                        <ui-button :class="{ 'blue': option.selected }"
                            v-for="option in typeOptions"
                            @click="onTabChanged(option)">
                            {{ option.type }}
                        </ui-button>
                    </ul>
                </div>
                <div class="property">
                    <div class="final-files-container">
                        <ul class="final-files">
                            <li v-for="item in finalFiles" :key="item.uuid"
                                @click="onAssetClick(item)">
                                <span class="selectable info-item">{{ item.type
                                    }}</span>
                                <span class="selectable info-item">{{ item.uuid
                                    }}</span>
                                <span class="selectable info-item">{{
                                    item.baseName }}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </body>

</html>
